﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>QueryTask with geometry, results as an InfoWindow</title>

    <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/init.js"></script>
    <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/esri/css/esri.css" />
    <script>
        dojo.require("esri.map");
        dojo.require("esri.tasks.query");

        var map, queryTask, query;
        var symbol, infoTemplate;

        function init() {
            //create map
            map = new esri.Map("mapDiv");

            var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer");
            map.addLayer(layer);


            dojo.connect(map, "onClick", executeQueryTask);//地图单击事件

            //查询信息
            queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1");
            query = new esri.tasks.Query();
            query.returnGeometry = true;
            query.outFields = ["STATE_NAME", "STATE_FIPS", "STATE_ABBR", "HYPERLINK", "AREA"];

            infoTemplate = new esri.InfoTemplate("${STATE_NAME}", "State Fips: ${STATE_FIPS}<br />Abbreviation: ${STATE_ABBR}<br />Area: ${AREA}");

            symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.5]));
        }

        function executeQueryTask(evt) {

            query.geometry = evt.mapPoint;//根据点击地图的坐标
            

            queryTask.execute(query, showResults);
        }

        function showResults(featureSet) {
            map.graphics.clear();

            dojo.forEach(featureSet.features, function (feature) {
                var graphic = feature;
                graphic.setSymbol(symbol);

                graphic.setInfoTemplate(infoTemplate);

                map.graphics.add(graphic);

            });
        }

        dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    Click on a State to get more info.  When State is highlighted, click State again to get infoWindow.
    <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
  </body>
</html>